<template>
	<view>
		<view class="list-box" v-if="recoverylist.length">
			<view class="notice">
				<fui-notice-bar :content="`您有${recoverylist.length}条停车欠费记录!`" height="88" size="30" single background="#fff" color="#ea3030">
					<view class="fui-icon__box">
						<fui-icon name="notice-fill" :size="40" color="#ea3030"></fui-icon>
					</view>
				</fui-notice-bar>
			</view>
			<fui-list>
				<fui-list-cell v-for="(item,index) in recoverylist" :key="index" :highlight="true" @click="checkItem(item)">
					<view class="item">
						<view class="top">
							<view class="park">
								<fui-icon name="order" size="30" color="#aaaaaa"></fui-icon>
								<fui-text style="margin:0 10rpx;" :text="item.records.plate_number" color="#000000" :size="28" block></fui-text>
								<fui-tag :text="item.records.rules_type_txt" background="#599cff" color="#fff" :padding="['8rpx','10rpx']"></fui-tag>
							</view>
							<view class="park" @click.stop="showPhoto(item.records)">
								<fui-icon name="picture" size="30" color="#aaaaaa"></fui-icon>
								<fui-text style="margin-left: 10rpx;" text="点击查看照片" decoration="underline" color="#000000" :size="28" block></fui-text>
							</view>
						</view>
						<view class="bottom">
							<view class="line">
								<view class="park">
									<fui-icon name="location" size="30" color="#aaaaaa"></fui-icon>
									<fui-text style="margin-left:10rpx;" :text="item.records.parking_title" color="#000000" :size="28" block></fui-text>
								</view>
								<view class="park">
									<fui-icon name="wait" size="30" color="#aaaaaa"></fui-icon>
									<fui-text style="margin-left: 10rpx;" :text="formatDateTime(item.records.entry_time)+' 入场'" color="#000000" :size="28" block></fui-text>
								</view>
								<view class="park">
									<fui-icon name="wait" size="30" color="#aaaaaa"></fui-icon>
									<fui-text style="margin-left: 10rpx;" :text="formatDateTime(item.records.exit_time)+' 出场'" color="#000000" :size="28" block></fui-text>
								</view>
							</view>
							<view class="price">
								<fui-text fontWeight="800" :text="'￥'+parseNumber(item.total_fee)" color="#2aaa0e" :size="32" block></fui-text>
								<view style="width: 30rpx;"></view>
								<fui-checkbox borderRadius="4rpx" value="1" :checked="item.checked"></fui-checkbox>	
							</view>
						</view>	
					</view>
				</fui-list-cell>
			</fui-list>
			<view class="pay" :style="`height: ${safebottom}rpx;`">
				<view class="hang">
					<view class="left">
						<fui-text text="需支付：" color="#000" :size="28"></fui-text>
						<fui-text text="￥" color="#fcb11a" :size="24"></fui-text>
						<fui-text :text="totalfee" color="#fcb11a" :size="42" style="margin-left: 6rpx;position: relative;top: 4rpx;"></fui-text>
					</view>
					<fui-button :disabled="totalfee<=0" radius="32rpx" width="270rpx" height="70rpx" @click="pay">立即支付</fui-button>
				</view>
			</view>
		</view>
		<view v-if="err" style="padding-top: 220rpx;">
			<fui-result type="fail" title="操作失败" :descr="err">
				<fui-button @click="$reLaunch('index/index')" width="400rpx" height="84rpx" text="返回主页" type="success" bold :margin="['48rpx','0','24rpx']"></fui-button>
			</fui-result>
		</view>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import {formatDateTime,parseNumber,inArray} from '@/utils/util.js'
	export default {
		data() {
			return {
				safebottom:'',
				err:'',
				plate_number:'',
				parking_id:'',
				barrier_id:'',
				barrier_type:'',
				recoverylist:[],
				totalfee:0,
				platform:''
			}
		},
		onLoad(e) {
			let that=this;
			that.plate_number=e.plate_number;
			that.parking_id=e.parking_id || '';
			that.barrier_id=e.barrier_id || '';
			that.$platform();
			uni.getSystemInfo({
			  success: function (info) {
				that.safebottom=info.safeAreaInsets.bottom+100;
			  }
			});
			this.$get('orders/recovery-list',{plate_number:this.plate_number},true).then(res=>{
				let recoverylist=[];
				for(let i=0;i<res.length;i++){
					let item=res[i];
					item.checked=true;
					if(this.parking_id){
						let search_parking=item.search_parking.split(',');
						if(inArray(search_parking,this.parking_id)){
							recoverylist.push(item);
						}
					}else{
						recoverylist.push(item);
					}
					this.recoverylist=recoverylist;
				}
				if(this.recoverylist.length===0){
					this.err='没有欠费记录';
					return;
				}
				this.countTotal();
			});
		},
		methods: {
			...methods,
			parseNumber,
			countTotal:function(){
				let totalfee=0;
				this.recoverylist.forEach(res=>{
					if(res.checked){
						totalfee+=parseFloat(res.total_fee);
					}
				});
				this.totalfee=totalfee.toFixed(2);
			},
			checkItem:function(item){
				item.checked=!item.checked;
				this.countTotal();
			},
			checkRecords:function(e){
				this.$navigateTo('index/parking?records_id='+e.id);
			},
			formatDateTime:function(item){
				return formatDateTime(new Date(item*1000)).slice(0,16);
			},
			showPhoto:function(item){
				uni.previewImage({
					urls:[item.entry_photo,item.exit_photo]
				});
			},
			pay:function(){
				let that=this;
				let pay_type;
				if(that.platform=='MP-WEIXIN'){
					pay_type='wechat-miniapp';
				}
				if(that.platform=='MP-ALIPAY'){
					pay_type='mp-alipay';
				}
				if(!pay_type){
					this.$msg('请使用微信或支付宝扫码');
					return;
				}
				let recovery_id=[];
				this.recoverylist.forEach(res=>{
					if(res.checked){
						recovery_id.push(res.id);
					}
				});
				if(recovery_id.length===0){
					this.$msg('请选中要补缴的项目');
					return;
				}
				this.$post('orders/recovery-pay',{
					pay_type:pay_type,
					plate_number:this.plate_number,
					barrier_id:this.barrier_id,
					recovery_id:recovery_id
				},true,true).then(res=>{
					wx.requestPayment({
						...res.payInfo,
						success:function(){
							that.$msg('支付成功');
							that.$redirectTo('index/orders');
						},
						fail:function(){
							that.$msg('支付失败');
						}
					});
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
.list-box{
	padding: 20rpx;
	padding-bottom: 150rpx;
}
.item{
	width: 100%;
}
.top{
	display: flex;
	justify-content: space-between;
	width: 100%;
	.park{
		display: flex;
		align-items: center;
		margin-bottom: 10rpx;
	}
}
.bottom{
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	.line{
		display: flex;
		flex-direction: column;
		.park{
			display: flex;
			align-items: center;
			margin-bottom: 10rpx;
		}
	}
	.price{
		display: flex;
		align-items: center;
	}
}

.notice{
	padding: 0 20rpx;
	background-color: #fff;
}
.pay{
	z-index: 9999;
	position: fixed;
	width: 100%;
	background-color: #fff;
	left:0;
	bottom: 0;
	.hang{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 24rpx;
		.left{
			display: flex;
			align-items: flex-end;
		}
	}
}
</style>